<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,initial-scale=1.0,user-scalable=0" />
<meta charset="UTF-8">
<title>Mobile Unit</title>
<script type="text/javascript" src="/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="/js/coo.js"></script>
<style>
body{margin:0; padding:10px; text-align:center;}
p{margin:0; padding:0;}
.css{position:relative; width:900px; overflow:hidden; border:1px solid #ddd; border-radius:5px; box-sizing:border-box;}
.css textarea{float:left; width:100%; height:400px; font-size:12px; border:none; background-color:transparent; outline:none; resize:none; padding:10px; box-sizing:border-box;}
.css p{float:left; width:100%; height:auto; overflow:hidden; border-top:1px solid #ddd; background:#f1f1f1;}
.css p:after{content:""; display:block; clear:both;}
.css p > input, .css p span{float:left; width:20%; height:40px; overflow:hidden; position:relative; border-radius:0; box-sizing:border-box; background-color:transparent; border:none; font-size:14px; outline:none; cursor:pointer; text-align:center; border-right:1px solid #ddd;}
.css p span{line-height:40px;}
.css p span:last-child{border:none !important;}
.css p span input{width:100%; height:100%; font-size:24px; position:absolute; left:0; top:0; z-index:1; opacity:0; outline:none; cursor:pointer;}
.css em{position:absolute; left:0; top:0; z-index:1; display:none; width:100%; height:100%;}
.css em em{left:50%; top:50%; margin-left:-15px; margin-top:-15px; width:30px; height:30px; -webkit-animation:preloader-spin 1s steps(12, end) infinite; animation:preloader-spin 1s steps(12, end) infinite; background-repeat:no-repeat; background-position:center center; background-size:30px 30px; background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%236c6c6c'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");}
@-webkit-keyframes preloader-spin{100%{-webkit-transform:rotate(360deg);}}
@keyframes preloader-spin{100%{transform:rotate(360deg);}}
@media (max-width: 768px) {
	.css{width:100%;}
	.css textarea{height:280px;}
	.css p > input, .css p span{width:100%; border-right:none; border-bottom:1px solid #ddd;}
}
</style>
</head>

<body>
<div class="css">
	<textarea placeholder="这里粘贴代码"></textarea>
	<p>
		<input type="button" class="px2 rem" value="px转rem" />
		<input type="button" class="px2 view" value="web转微信" />
		<input type="button" class="px2 nl" value="清除换行" />
		<span>图片转base64<input type="file" class="base64" name="file" value="" /></span>
		<span>上传图片到网络<input type="file" class="online" name="file" value="" /></span>
	</p>
	<em><em></em></em>
</div>
</body>
</html>
<script>
$(function(){
	$('.css textarea').focus().select();
	$('.css .px2').click(function(){
		var code = $('.css textarea'), val = code.val();
		if(!val.length)return;
		if($(this).is('.rem')){
			val = val.replace(/(-?[\d\.]+)px\b/ig, function($, $1){
				return (Number($1)/100) + 'rem';
			});
		}else if($(this).is('.view')){
			if(!/<\/?\w+>/.test(val)){
				$.log(1111);
				val = val.replace(/(-?[\d\.]+)(px|rem)\b/ig, function($, $1, $2){
					var number = Number($1);
					if($2=='rem')number = number*100;
					return Math.floor(number*(750/320)) + 'rpx';
				}).replace(/((?!\.)[\s\S])\ba\b/ig, '$1navigator').replace(/((?!\.)[\s\S])\bdiv\b/ig, '$1view')
				.replace(/((?!\.)[\s\S])\bspan\b/ig, '$1text').replace(/((?!\.)[\s\S])\bselect\b/ig, '$1picker')
				.replace(/((?!\.)[\s\S])\b(ul|ol|li|em|h1|h2|h3|h4|h5|h6|i|b|strong)\b/ig, '$1.$2');
			}else{
				$.log(22222);
				val = val.replace(/{([^}]+)}/ig, function($, $1){
					return '{{'+$1.replace(/\$\w+->/g, 'item.').replace(/>/g, '')+'}}';
				})
				.replace(/<(a)([^>]*)>([\s\S]*?)<\/\1>/ig, function($, $1, $2, $3){
					var wxtag = 'navigator', param = $2;
					if(param.indexOf('javascript:void(0)')>-1 && param.indexOf('btn')>-1){
						wxtag = 'button';
						param = param.replace(/ href=(['"])[^'"]*\1/, '');
						param += ' form-type="submit"';
					}else{
						param = param.replace(' href="javascript:void(0)"', '').replace('href', 'url')
						.replace(/url="(wap.php)?\?app=(\w+)&act=(\w+)([^"]*)"/, function($, $1, $2, $3, $4){
							return 'url="/pages/'+$2+'/'+$3+($4.length?'?'+$4.substr(1):'')+'"';
						});
					}
					return '<'+wxtag+param+'>'+$3+'</'+wxtag+'>';
				})
				.replace(/<(div)[^>]+?class="pageView"[^>]*>(<\1[^>]*>[\s\S]*?<\/\1>|[\s\S])*?<\/\1>/ig, function(){
					return '<import src="../../common/template.wxml" /><template is="swiper" data="{{flashes}}" />';
				})
				.replace(/<(\/?)div([^>]*)>/ig, function($, $1, $2){
					var param = $2.replace(/( main-top| main-padding-top| main-bottom| main-padding-bottom| width-wrap)/ig, '');
					return '<'+$1+'view'+(!$1.length?param:'')+'>';
				})
				.replace(/<(\/?)(?:span)([^>]*)>/ig, function($, $1, $2){
					return '<'+$1+'text'+(!$1.length?$2:'')+'>';
				})
				.replace(/<(\/?)(?:form)([^>]*)>/ig, function($, $1, $2){
					return '<'+$1+'form'+(!$1.length?' bindsubmit="postForm"':'')+'>';
				})
				.replace(/<(\/?)(?:input)([^>]*)>/ig, function($, $1, $2){
					var param = $2.replace(/type="hidden"/, 'type="text" class="hidden"').replace(/type="tel"/, 'type="number"').replace(/ id="\w*"/, '');
					return '<'+$1+'input'+(!$1.length?param:'')+'>';
				})
				.replace(/<(select)([^>]*)>([\s\S]*)<\/\1>/ig, function($, $1, $2, $3){
					var option = $3;
					return '<picker bindchange="change" range="{{data}}" range-key="name">'+option+'</picker>';
				})
				.replace(/<(\/?)((?!navigator|view|text|label|form|input|textarea|picker|button)\w+)\b([^>]*)>/ig, function($, $1, $2, $3){
					var tag = $2, param = $3, wxtag = 'view';
					if(/class=(['"])[^'"]*\1/.test(param))param = param.replace(/class=(['"])([^'"]*)\1/, 'class=$1'+tag+' $2$1');
					else param += ' class="'+tag+'"';
					if(tag=='font')wxtag = 'text';
					return '<'+$1+wxtag+(!$1.length?param:'')+'>';
				});
			}
		}else if($(this).is('.nl')){
			val = val.replace(/[\r\n]/g, '');
		}
		code.val(val);
		setTimeout(function(){code.focus().select()}, 100);
	});
	$('.css .base64').ajaxupload({
		url : '/api.php?app=other&act=image_base64',
		dataType : 'text',
		before : function(){$('.css em').show()},
		callback : {
			success : function(base64, status){
				$('.css textarea').val(base64);
				setTimeout(function(){$('.css textarea').focus().select()}, 100);
			},
			error : function(data, status, e){
				alert('Upload error\n'+e);
			},
			complete : function(){
				$('.css em').hide();
			}
		}
	});
	$('.css .online').ajaxupload({
		url : '/api.php?app=other&act=image_online',
		dataType : 'text',
		before : function(){$('.css em').show()},
		callback : {
			success : function(url, status){
				$('.css textarea').val(url);
				setTimeout(function(){$('.css textarea').focus().select()}, 100);
			},
			error : function(data, status, e){
				alert('Upload error\n'+e);
			},
			complete : function(){
				$('.css em').hide();
			}
		}
	});
});
</script>